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Federation съезжали 


Смирнов Максим 
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Немного о себе 


• б лет занимаюсь їгопіепа-разработкой 
• 4 года являюсь частью Гинькофф 


• Начал разработчиком и дорос до 
руководителя направления 


г Во время работы был как фронтом, так и 
бэкером с уклоном в SRE 
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Вводная 


• Монолит – сборная солянка из кода с примесью спагетти 


з-д м 
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INL Р 


“ІЗ и” 
м = 


ат”? 
үү 


осал Frontend 
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че 


Вводная 


Микросервис — сервис исполняющий только определенную 


| 


задачу 


Ве“ Gateway меч, 
| мезо, 


" 1: 1: 1: 


PERA Frontend 
| S | ТИНБКОФФ Conf 2022 
че 


Вводная 


Module Federation (MFE) - М/еррасі-плагин для управления 
микросервисами 
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О чем будем говорить? 


г Каков был тот монолит? 


Д0 тинькоое то: 
че 


О чем будем говорить? 


г Каков был тот монолит? 


• Как мы приняли решение пилиться? 


Д0 тинькоое то: 
че 


О чем будем говорить? 


г Каков был тот монолит? 
e Как мы приняли решение пилиться? 


e Что мы накрутили в MFE 
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О чем будем говорить? 


e Каков был тот монолит? 
e Как мы приняли решение пилиться? 
e Что мы накрутили в MFE 


• Бонусы, полученные от микрофронтендового 
подхода 
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О чем будем говорить? 


e Каков был тот монолит? 
e Как мы приняли решение пилиться? 
e Что мы накрутили в MFE 


• Бонусы, полученные от микрофронтендового 
подхода 


• Куда дальше будем его развивать 


у тинькосо то: 
че 


Тот самый монолит 


Classic personal account 


Backend API 
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Тот самый монолит 


/ operations/ list 


/ operations/i nfo/ àd 
| 
4 operations/info/. пол ем 
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/ operations/info/ ла. general 


Что мы решили делать? #1 


• Перевод проекта на монорепозиторий пх-ууогкврасе 
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Что мы решили делать? #1 


• Перевод проекта на монорепозитории пхмогкзрасе 


е Вынести в лейзи-модули все, что не было вынесено раньше 
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Что мы решили делать? #1 


• Перевод проекта на монорепозиторий пхмогкзрасе 
• Вынести в лейзи-модули все, что не было вынесено раньше 


" Определить границы роугинга внутри страниц 
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Что мы решили делать? #1 


• Перевод проекта на монорепозиторий пхмогкзрасе 
• Вынести в лейзи-модули все, что не было вынесено раньше 
• Определить границы роутинга внутри страниц 


е Декомпозиция логики по локальным/прт-библиотекам 
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Что мы решили делать? #1 


• Перевод проекта на монорепозиторий пх-ууогкврасе 

е Вынести в лейзи-модули все, что не было вынесено раньше 
• Определить границы роутинга внутри страниц 

е Декомпозиция логики по локальным/прт-библиотекам 


• Шина данных между страницами 
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Что мы решили делать? #1 


• |еревод проекта на монорепозиторий пх-ууогкерасе 

е Вынести в лейзи-модули все, что не было вынесено раньше 
• Определить границы роутинга внутри страниц 

е Декомпозиция логики по локальным/прт-библиотекам 

• Шина данных между страницами 


• Перевод больших страниц на фича-сторы 


у тинькосо шо: 
че 


Что вышло? #1 


• Чуть более красивый монолит 
е Вся общая логика находится в библиотеках 
• Единый подход по получения глобальных данных 


• Все наконец-то переписано на лейзи-модули 


ШІ) тинькосо то: 
че 


SHOULD І DEPLOY TODAY? 


I SEE YOU DEPLOYED ON 
FRIDAY 


Сбой как мотиватор распила 


Сбой в монолите 
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Сбой как мотиватор распила 


Сбой в монолите 


е Недоступность всего функционала 
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Сбой как мотиватор распила 


Сбой в монолите 


е Недоступность всего функционала 


• Сложная идентификация триггера сбоя 
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Сбой как мотиватор распила 


Сбой в монолите 


е Недоступность всего функционала 
• Сложная идентификация триггера сбоя 


• ||Іостоянные подгоны со стороны бизнеса 
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Сбой как мотиватор распила 


Сбой в монолите 


е Недоступность всего функционала 
• Сложная идентификация триггера сбоя 
• ||Іостоянные подгоны со стороны бизнеса 


• Оптимизации после сбоев как триггер для нового сбоя 
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Сбой как мотиватор распила 


Сбой в микросервисе 
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Сбой как мотиватор распила 


Сбой в микросервисе 
е Недоступность только части функционала 
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Сбой как мотиватор распила 
Сбой в микросервисе 


е Недоступность только части функционала 


• Легкий поиск триггера 
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Сбой как мотиватор распила 


Сбой в микросервисе 
• Недоступность только части функционала 


• Легкий поиск триггера 


• Подгоны от бизнеса будут всегда 
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Сбой как мотиватор распила 


Сбой в микросервисе 
• Недоступность только части функционала 


• Легкий поиск триггера 
• Подгоны от бизнеса будут всегда 


• Полечить место сбоя легче, все замкнуто на микросервис 
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Что мы придумали 


Боске | 
місгозегуісе 4 

| 

БосКеис( | 
місгозегілсе 5 


page 


settings | 


| operations Мек%:15 
мой" орр ре е stores app —————| ВЕЕ | | 
ЕИ 21 


backend 
мсгозегмісе 2 


Private network zone 
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Public network zone 
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Что мы придумали 


Remote app content 
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ДЕ? ТИНБКОФФ 
че 


МЕЕ, я выбираю тебя 


. 
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< “> 
ЛЕ ТИНБКОФФ 


Как оно выглядит вначале 


plugins: | 
new Моди1еРедега*1опРТидлп (4 

remotes: 4 
main: 'талтмаћ р://Тоса Поз : 4201 / гетофтеЕптгу.]$', 
operations: 'орегатлопзаћ р://Тоса ћо5з1:4202/гетотеЕп гу. 15', 
stores: '5Тогечаћ  р:// 1оса1ћоѕї: 4203/ гетокеЕп гу.15', 

}, 

shared: <$һаге({ 
'@angular/core': {singleton: true, strictVersion: true, гедиігедУег5іоп: 'auto'}, 
'@angular/common': {singleton: true, strictVersion: true, requiredVersion: 'auto'}, 
'@angular/common/http': {singleton: true, strictVersion: true, requiredVersion: 'auto'}, 
'@angular/router': {singleton: true, strictVersion: true, requiredVersion: 'auto'}, 
'@angular/forms': {singleton: true, strictVersion: true, requiredVersion: 'auto’}, 
.. . SharedMappings.getDescriptors(), 


2). 


7), 
sharedMappings.getPlugin(), кс 
І, 


Frontend 
Conf 2022 


Как оно выглядит вначале 


remotes: 5 
main: 'ташмаћ р://Тоса Поз : 4201 / гетотеЕп гу.15', 
operations: "орегаблопчаћ р://Тоса о :4202/гетотеЕп гу.15', 
stores: '5Тогечаћ р:// оса ћоѕ1: 4203/ гепотеЕпїгу. ] ѕ', 

7, 
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Как оно выглядит вначале 


shared: 5Ппаге(1 
"чапдитаг/соге": {singleton: true, ѕїгісіМегѕіоп: true, гедиігедУег5іоп: 'auto'}, 
'@angular/common': {singleton: true, strictVersion: true, requiredVersion: 'auto'}, 


'@angular/common/http': {singleton: true, strictVersion: true, requiredVersion: 
'auto'}, 


'@angular/router': {singleton: true, strictVersion: true, requiredVersion: 'auto'}, 
'@angular/forms': {singleton: true, strictVersion: true, requiredVersion: 'auto’}, 
. ..„ SharedMappings.getDescriptors(), 


$), 
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Как оно выглядит вначале 


Плюсы 
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Как оно выглядит вначале 


Плюсы 


• Работает из коробки 
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Как оно выглядит вначале 


Плюсы 
• Работает из коробки 


• Удобное управление зависимостями 
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Как оно выглядит вначале 


Плюсы 
• Работает из коробки 
• Удобное управление зависимостями 


• Из конфига видно сразу все приложения 


Д0 тинькоое то: 
че 


Как оно выглядит вначале 


Вопрос-наброс 


ОХ, Frontend 
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Как оно выглядит вначале 


Вопрос-наброс 


e А как же управлять динамически? 
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Как оно выглядит вначале 


Вопрос-наброс 


e А как же управлять динамически? 


• Что там по оолбокам? 
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Как оно выглядит вначале 


Вопрос-наброс 
e А как же управлять динамически? 
• Что там по оолбокам? 


б А что, если я хочу ремоут в ремоуте? 
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Что там по динамике 


• Взять файл с конфигом 
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Что там по динамике 


е Взять файл с конфигом 


• | |еретряхнуть роутер 
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Что там по динамике 


• Взять файл с конфигом 
• | |еретряхнуть роутер 


e Добавить Lazy Loading длягетоте-модулей 


оза Fronten 
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Что там по динамике 


1. Get config 


/assets/ config, json 


HOST 


| Вија router tree 


9 Согу [одо 


о х ТИНБКОФФ ЕС 
> 


моди Арр/! remot eEntry.)s 
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Что там по динамике 


4 
"гетоеЕпї гу": "Пр: //1оса1ћоѕ1: 4201/ гетоїеЕпігу. 15", 
"гетоїеМате": "main", 
"ехро5ейМодите": ", /Моди1е", 
"аіѕр1ауМате": "памідабіоп.таїп", 
"гоитеРаїћ": "main", 
"поМоаи ІеМате": "ВКетоїеЕпї гуМоаи le" 
У, 
4 
"гетоеЕпї гу": "Пр: //1оса1ћоѕ1: 4202/ гетоїеЕпїгу. 15", 
"гетоїеМате": "stores", 
"ехро5ейМодите": ", /Моди1е", 
"аіѕр1ауМате": "памідаїіоп. ѕ1огеѕ", 
"routePath": "stores", 
"ngModuleName": "RemoteEntryModu le" 
} 
| үсу 
2 > тиникоФо лес 
чо? 


Загрузчик 


import {LoadRemoteModule0ptions} from '@angular-architects/module-federation'; 


export type Microfrontend = LoadRemoteModule0ptions 4 1 
remoteName: string; 
displayName: string; 
routePath: string; 


ngModu [еМате: string; 


14 
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Ы < ТИНБКОФФ кс 
= 


Загрузчик 


import {LoadRemoteModule0ptions} from '@angular-architects/module-federation'; 


export type Microfrontend = LoadRemoteModule0ptions$& 1 


remoteName: string; 
displayName: string; 
routePath: string; 


ngModu leName: string; 


14 
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Ы х ТИНБКОФФ кс 
ч? 


Загрузчик 


export class МісгоТгоптепаоадегбегуісе 4 
сопокгиског( 
private readonly router: Router, 
private readonly httpClient: HttpClient, 


private readonly destroy$: TuiDestroyService 


buildDynamicRoutes(): Орѕегуар1е<роо1еап> 4 
return this.resolveConfig().pipe( 
takeUntil(this.destroy$), 
tap(cfg => 
this. гоиЁег. гезе СопТ 10 ( 


buildApplicationRoutes (cfg), 
), 
тарТо(їгие), 


} 


private resolveConfig(): Обзегмабје<М1сгоТгопТепа []> 4 


return this.httpClient.get<Microfrontend[]>('/assets/config/mf/config.json') 


} 
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Загрузчик 


private resolveConfig(): Орсегуар1е<МісгоТгоптела []> 4 
return this.httpClient.get<«Microfrontend[]>('/assets/config/mf/config.json') 
} 
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Загрузчик 


buildDynamicRoutes(): Обѕегуар1е<роо1еап> 4 
return this.resolveConfig().pipe( 

takeUntil(this.destroy$), 

tap(cfg => 

this.router.resetConfig( 
buildApplicationRoutes(cfog), 
), 
), 


парто (+гие), 
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Загрузчик 


providers: | 


1 
provide: АРР ЈМЈТТА! ГРЕВ, 
ивеҒастогу: (пісгоТгоптепабегуісе: МісготТгоптчепабегуісе) => () => 
microfrontendService.buildDynamicRoutes(), 
deps: [MicrofrontendService], 
multi: true, 
У, 
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у mooo кс 
4 


Роутер-шейкер 


import {loadRemoteModule} from '@angular-architects/module-federation’; 
export function buildApplicationRoutes(options: Microfrontend[]): Routes 4 
const mfRoutes: Routes = Array.from(options).map(o => (1 
path: o.routePath, 
loadChildren: () => loadRemoteModule(o).then(m => т[о. паМодитеМате]), 
canActivate: [AuthGuard], 


})); 


return | 
. . „ПТВоиќе5, 
1 
path: "", 
гедігесіТо: 'та1п', 
раћМајсћ: 'full', 
}, 
{ 
path: “жж”, 
гедігесіТо: "404", 
раҰһМағсһ: 'full', 
}, Frontend 
Conf 2022 


Роутер-шейкер 


import {loadRemoteModule} from '@angular-architects/module-federation’; 
export function buildApplicationRoutes(options: Microfrontend[]): Routes 4 
const mfRoutes: Routes = Array.from(options).map(o => (1 
path: o.routePath, 
loadChildren: () => loadRemoteModule(o).then(m => т[о. паМодитеМате]), 
canActivate: [AuthGuard], 


})); 


return | 
. . „ПТВоиќе5, 
1 
path: "", 
гедігесіТо: 'та1п', 
раћМајсћ: 'full', 
}, 
{ 
path: “жж”, 
гедігесіТо: "404", 
раҰһМағсһ: 'full', 
}, Frontend 
Conf 2022 


Роутер-шейкер 


const тЕВоиќе5: Routes = Аггау, Ғгот(ор%іопе).тар(о => (4 
path: o.routePath, 
loadChildren: () => loadRemoteModule(o).then(m => m[o0.ngModuleName]), 
canActivate: [AuthGuard], 

})); 
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Что там по динамике 


Динамические загрузки 
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Ке | 
И И т 
Ы > ТИНБКОФФ Оставшиеся таски ЕС 


Динамические загрузки — плюшки 


• Коширование конфига в коде при обращении 


Д0 тинькоое то: 
че 


Динамические загрузки — плюшки 


• Коширование конфига в коде при обращении 


• Подкладывание конфига B session storage 
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Динамические загрузки — плюшки 


• Кэширование конфига в коде при обращении 
• Подкладывание конфига в session storage 


e Конфиг как отдельная репа с СІ/СО и безрелизное 
добавление новых сервисов 
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Динамические загрузки — плюшки 


• Кэширование конфига в коде при обращении 
• Подкладывание конфига в session storage 


e Конфиг как отдельная репа с СІ/СО и безрелизное 
добавление новых сервисов 


• СОМ для раздачи конфига 


оза Fronten 
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Фолбэки 


а 2 ТИНБКОФФ ЕС 
4 У 
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Фолбэки 


e Загрузка конфига 
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Фолбэки 


e Загрузка конфига 


• ||есеходы по приложению 


ШІ) тинькосо то: 
че 


Фолбэки 


• Загрузка конфига 
• | |ереходы по приложению 


- Плановые работы на гегтоїе-приложении 


ШІ) тинькосо то: 
че 


Фолбэк: Упавшии конфиг 


HOST 


Запрос Конфиг о. 


config, json 


HeT 


Есте В кэше? Сгонаћ до. файлом 


=> < Сервис Живой? 


Зо бери фойл и положи В КУШ 


OPTIONS допрос К серверу с конфигом 
Нет 

Отдой 
Клиенту 


O OTgaeM Клиенту фойл ид прот үхшего КОША 


ДЕ х ТИНБКОФФ 
5 
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Фолбэк: Сломанный переход 


Как говорится, просто добавь воды обработку и редирект в По*{-приложении 


this.router.events.pipe(takeUntil(this.destroy$)).subscribe((event: Event) => 4 
switch (true) 4 
case event instanceof МауідабіопЕггог: 1 
/ж 
По some logic 


ж/ 
{015 , гоитег. пауідаїе( [' гедігесї', 'еггог']); 
break; 
} 
} 
7); 


у тинькосо то: 
че 


Фолбэк: Работы на проде 


ДЕ х ТИНБКОФФ 
е 


HOST 


/ remot ел health 


503 UN < Maintenance Мосе? 


Нет 
503 ОМ <= < 


Живой Ли Мой серВис? 
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Фолбэк: Работы на проде 


{ 
"remoteEntry": "ҺіТр: //1оса1ћоѕ1: 4201/ гетотеЕп гу. 15", 
"ретпоїеМате": "main", 
"ехро5ейМодите": "./МодиТе", 
"displayName": "памідаїіоп.таїп", 
"routePath": "талп", 
пиаМогіії1еМКіате"!: "ВетатаЕ Еп к\/МоЧиТ е“ 


"health": 4 
"url": "/гетоте/талп/ћеа СП", 
"ttl": "5000", 
"scheduler": "10" 


вет "/ remote/main/ health" 


Пн 5 секунд Мокеимуи 


Повторяем кожање. 10 секунд 
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Фолбэк: Работы на проде 


ЗолроШиВоем хелс 


HOST > Все хорошо, Живем Кок 
| 4 ронеше 


Нет 


Соддоќ олерт, Зологирув, иоВесб илошку В хедере о Временной недосТупносТи 


функимоноЛенос Ти» 
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Ремоут в ремоуте 


2 У ЕС Frontend 
а ТИНБКОФФ Cor 
QF 


Небольшой рассказ 


АА Frontend 
с ыы Conf 2022 
224 


Небольшой рассказ 


ұду 


21 


Бе 
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private resolveConfig(): Орб5егуарТте«Місгоїгопкепа []> 4 
return this.httpClient.get<Microfrontend[]>('/assets/config/mf/config.json').pipe( 
tap(mfConfig => 
sessionStorage.setItem(CONFIGURATION_STORAGE_KEY, JSON.stringify(mfConfig))) 
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export function ТоадВетоТеВоџТе ( гетојеМате: КепотеМапев) 4 
return new Рготіѕе( (геѕо1ме, reject) => 1 
const mfConfig = ѕеѕѕіопбіогаде. де ТЕ ет (СОМЕТОЏВАТТОМ_5ТОВАСЕ_КЕУ ); 


if (!mfConfig) 4 
reject(new Error('CONFIG not provided')); 
} 


const remotes: Microfrontend[] = JSON.parse(mfConfig as string); 
const requiredRemote = remotes.find((remote: Microfrontend) => remote. гепотеМапе === 
remoteName) : 


if (!requiredRemote) 4 
reject(new Еггог( Remote with provided пате ${remoteName}, not Тоипа`)); 


} 


гесоіуе( 
loadRemoteModule(requiredRemote as Місго#гопіепа) . ћеп(т => m[(requiredRemote ас 
МісгоТгопТтепа) . поМоаи1емате] ), 


); 
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if (!mfConfig) 4 
reject(new Error('CONFIG not ргомійеа")); 
} 


const remotes: Microfrontend[] = JSON.parse(mfConfig as stringo); 
const requiredRemote = remotes.find((remote: Microfrontend) => remote. гепотеМапе === 
remoteName) : 


if (!requiredRemote) 4 
reject(new Еггог( Remote with provided пате ${remoteName}, not Тоипа`)); 


} 


гесоіуе( 
loadRemoteModule(requiredRemote as Місго#гопіепа) . ћеп(т => m[(requiredRemote ас 
МісгоТгопТтепа) . поМоаи1емате] ), 


); 
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export function loadRemoteRoute(remoteName: КепотеМапев) 4 


генінга пеш Реотісеї ( гесп1Т ме гетес+\ => 4 


const mfConfig = ѕеѕѕіопЅ1огаде. де ЈЕ ет( СОМЕТСУВАТТОМ 5ТОВАСЕ КЕУ); 


if (!mfConfig) 4 
reject(new Error('CONFIG not provided')); 
} 


const remotes: Microfrontend[] = JSON.parse(mfConfig as string); 
const requiredRemote = remotes.find((remote: Microfrontend) => remote. гепотеМапе === 


remoteName) : 


if (!requiredRemote) 4 
reject(new Error(`Remote with provided пате ${remoteName}, пої Тоипа )); 


} 


гесоіуе( 
loadRemoteModule(requiredRemote as Microfrontend).then(m => m[(requiredRemote ас 
МасгоТгопТепа) . поМоаи1емате] ), 


); 
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генінга пеш Реотісеї ( гесп1Т ме гетес+\ => 4 


const mfConfig = ѕеѕѕіопЅ1огаде. де ЈЕ ет( СОМЕТСУВАТТОМ 5ТОВАСЕ КЕУ); 


if (!mfConfig) 4 
reject(new Error('CONFIG not provided')); 
} 


const remotes: Microfrontend[] = JSON.parse(mfConfig as string); 
const requiredRemote = remotes.find((remote: Microfrontend) => remote. гепотеМапе === 


remoteName) : 


if (!requiredRemote) 4 
reject(new Error(`Remote with provided пате ${remoteName}, пої Тоипа )); 


} 


гесоіме( 


loadRemoteModule(requiredRemote as Місго#гопіепа) . ћеп(т => m[(requiredRemote ас 
МісгоТгопТтепа) . поМоаи1емате] ), 


7] 7 
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1 
path: "орегаќктоп5", 
loadChildren: () => 1оадВетотеВои+е ( "орегафіоп5'), 


}, 
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e Упаковка root-state в прт-либу 
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Смирнов Максим 
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